import React, { Component } from 'react';
import styled from 'styled-components';
import Table from 'rc-table';
import 'rc-table/assets/index.css';
import Pagination from 'rc-pagination';
import 'rc-pagination/assets/index.css';
import { connect } from 'dva';
import Panel from './Panel';

const columns = [{
  title: 'Event',
  dataIndex: 'event',
}, {
  title: 'Occured',
  dataIndex: 'occured',
}, {
  title: 'Type',
  dataIndex: 'type',
}];

const StyledTable = styled(Table)`
  &.rc-table {
    table {
      width: 100%;
      border-collapse: collapse;

      thead tr {
        text-align: left;
      }

      tbody tr:hover {
        background-color: #f0f0f0;
      }
    }
  }
`;

const StyledPagination = styled(Pagination)`
  float: right;
  margin-right: 24px;
  .rc-pagination-prev, .rc-pagination-next, .rc-pagination-item {
    border: none;
    color: black;
  }
  .rc-pagination-item-active {
    background-color: transparent;

    a {
      color: black!important;
    }
  }
`;

class ActivityLog extends Component {
  componentDidMount() {
    this.props.getDataSource();
  }

  render() {
    const { dataSource, getDataSource, current, pageSize, total } = this.props;

    return (
      <Panel title="ActivityLog">
        <StyledTable
          columns={columns}
          data={dataSource}
          rowKey="id"
        />
        <StyledPagination
          current={current}
          pageSize={pageSize}
          total={total}
          onChange={page => getDataSource(page)}
        />
      </Panel>
    );
  }
}

export default connect(
  state => ({
    current: state.activityLog.current,
    pageSize: state.activityLog.pageSize,
    total: state.activityLog.total,
    dataSource: state.activityLog.dataSource,
  }),
  dispatch => ({
    getDataSource: page => dispatch({ type: 'activityLog/getDataSource', payload: { page } }),
  }),
)(ActivityLog);
